.sign-up {
  position: relative;
  padding: 12px;
  margin-bottom: 48px;
  background: hsl(40, 80%, 95%);
  color: hsl(40, 50%, 50%);
  border: solid 4px hsl(40, 85%, 85%);

  h1 {
    margin: 0;
    padding: 0;
    font: bold 18px/18px $nav;
  }

  p {
    margin: 12px 0;
    font: 15px/24px $nav;
  }

  p.small {
    margin: 15px 0 4px 0;
    font: 14px/18px $nav;
    color: hsl(40, 50%, 70%);
  }

  a {
    color: hsl(40, 100%, 50%);
  }

  a:hover {
    color: hsl(40, 100%, 40%);
    border-color: hsl(40, 90%, 80%);
  }

  .dismiss {
    position: absolute;
    // Float over header.
    z-index: 2;
    right: 4px;
    top: 0;
    font: bold 24px $nav;
    padding: 4px 8px;
    cursor: pointer;
  }

  .dismiss:hover {
    color: hsl(40, 100%, 50%);
  }

  input {
    display: table-cell;
    padding: 4px;
    font: 16px $nav;
    outline: none;
    border-radius: 6px;
    border: solid 2px hsl(40, 100%, 75%);
    color: hsl(40, 70%, 30%);
  }

  input.email {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }

  input.button {
    float: right;
    margin: 10px 0 10px 5px;
    padding: 4px 8px;
    font: 600 13px $nav;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: hsl(40, 100%, 60%);
  }

  input:focus {
    border-color: hsl(40, 100%, 50%);
  }
}